<template>
  <view
    :class="{
      border: border,
    }"
  >
    <u-scroll-list :indicator="false">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="button"
        :style="{
          padding: padding,
        }"
      >
        <view
          :class="{
            activeButton: keyName == '' ? current == index : current == item[keyName],
            activeBold:
              (keyName == '' ? current == index : current == item[keyName]) && activeBold,
          }"
          @click="handleStatus(item, index)"
          >{{ item[keyLabel] }}</view
        >
      </view>
    </u-scroll-list>
  </view>
</template>
<script>
export default {
  props: {
    // 滚动数组
    list: {
      type: Array,
      default: [],
      required: true,
    },
    // 选中Item
    current: {
      type: [String, Number],
      default: "",
    },
    // 显示文字
    keyLabel: {
      type: String,
      default: "label",
    },
    // 绑定键 (不设置默认根据下标判断)
    keyName: {
      type: String,
      default: "",
    },
    // 下边框线
    border: {
      type: [Boolean, String],
      default: false,
    },
    // 选中加粗
    activeBold: {
      type: [Boolean, String],
      default: true,
    },
    // 内边距
    padding: {
      type: String,
      default: "0 20rpx 0 0",
    },
  },
  methods: {
    // 点击事件
    handleStatus(val, index) {
      this.$emit("click", {
        index,
        ...val,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.button {
  view {
    min-width: 120rpx;
    height: 46rpx;
    line-height: 46rpx;
    text-align: center;
    padding: 0 20rpx;
    font-size: 24rpx;
    color: #555555;
    border-radius: 8rpx;
    background-color: #f9fcfc;
    white-space: nowrap;
  }
  .activeButton {
    color: $active-color;
    background-color: #e9f4f4;
  }
}
.activeBold {
  font-weight: 600;
}
.border {
  border-bottom: 1rpx solid #d9d9d999;
}
</style>
